<template>
  <view :style="[scPriceStyle]" class="sc-price" @click="handleClick">
    <text v-if="symbol" :style="{ fontSize: sizeMap.symbol }" class="symbol">{{ symbol }}
    </text>
    <text :style="{ fontSize: sizeMap.integer }" class="integer">
      {{ parsedPrice.integer }}
    </text>
    <template v-if="parsedPrice.decimal">
      <text :style="{ fontSize: sizeMap.decimal }" class="point">.</text>
      <text :style="{ fontSize: sizeMap.decimal }" class="decimal">{{ parsedPrice.decimal }}
      </text>
    </template>
  </view>
</template>

<script>
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";

/**
 * props说明
 * @property {String|Number} price      - 价格数值，必填项
 * @property {String}        symbol     - 货币符号，默认为"¥"
 * @property {String|Number} symbolSize - 货币符号字体大小，支持rpx、px等单位，默认为"24"
 * @property {String|Number} intSize    - 整数部分字体大小，支持rpx、px等单位，默认为"32"
 * @property {String|Number} decSize    - 小数部分字体大小，支持rpx、px等单位，默认为"32"
 * @property {Boolean}       bold       - 是否加粗显示，默认为false
 * @property {String}        color      - 价格文本颜色，支持颜色名称、16进制、RGB等格式，默认为"#000"
 * 
 * @event {Function} click - 点击事件，点击价格时触发
 * 
 * @example
 * <sc-price price="99.99" symbol="$" symbolSize="20" intSize="28" decSize="24" bold color="#FF0000" />
 */

export default {
  name: "ScPrice",
  mixin: [mpMixin, mixin],
  props: {
    price: {
      type: [String, Number],
      required: true,
    },
    symbol: {
      type: String,
      default: "¥",
    },
    symbolSize: {
      type: String,
      default: "24",
    },
    intSize: {
      type: String,
      default: "32",
    },
    decSize: {
      type: String,
      default: "32",
    },
    bold: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "#000",
    },
  },
  emits: ["click"],
  data() {
    return {};
  },
  computed: {
    scPriceStyle() {
      return {
        color: this.$sc.getColor(this.color),
        fontWeight: this.bold ? 'bold' : 'normal'
      }
    },
    sizeMap() {
      return {
        symbol: this.$sc.addUnit(this.symbolSize),
        integer: this.$sc.addUnit(this.intSize),
        decimal: this.$sc.addUnit(this.decSize)
      };
    },
    parsedPrice() {
      const parts = String(this.price).split('.');
      const integer = parts[0] || '0';
      const decimal = parts[1] || '';
      return {
        integer,
        decimal
      };
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  },
};
</script>

<style lang="scss" scoped>
.sc-price {
  display: flex;
  align-items: baseline;

  text {
    line-height: 1;
  }
}
</style>
